<template>
    <div v-for="form in data" :key="form.type">
        <el-card v-if="form.details[13].value === 1"  class="box-card" >
            <div slot="header" class="clearfix">
                <!-- Icon 图标：提供了一套常用的图标集合。直接通过设置类名为 el-icon-iconName 来使用即可。 -->
                <!--            <i class="el-icon-s-order" style="color: #0a76a4;margin-right: 1%" />-->
                <span>{{form.type}}</span>
                <!--            <el-button style="float: right; padding: 3px 0" type="primary" @click="">操作按钮</el-button>-->
                <el-button-group class="ml-4">

                    <!-- 查看不分权限 -->
                    <el-button plain icon="View"  @click="view(form)"></el-button>
                    <!-- 抢单，只有运维才可以看到，运维的id为2 -->
                    <el-button plain icon="FirstAidKit" v-if="hasPermission(form,2)" @click="get(form)"></el-button>
                    <!-- 编辑，只要工单未被处理时，发起人是本人时才可以编辑 -->
                    <el-button plain  icon="edit" v-if="hasEditPermission(form,0)" @click="edit(form)"/>
                    <!-- 编辑，只要工单未被处理时，发起人是本人时才可以删除 -->
                    <el-button plain icon="Delete" v-if="hasDeletePermission(form,0)" @click="del(form)"/>
                    <!-- 分享不分权限 -->
                    <el-button plain icon="Share" @click="share"/>

                </el-button-group>
            </div>
            <div class="text item">
                <!-- Descriptions 描述列表，列表形式展示多个字段。 -->
                <el-descriptions :column="1">
                    <template v-for="(col, index) in form.details">
                        <el-descriptions-item
                            v-if="col.display"
                            :key="index"
                            :label="col.label"
                            :span="col.span"
                        >{{ col.value }}
                        </el-descriptions-item>
                    </template></el-descriptions>
                <el-steps :active="form.details[13].value">
                    <el-step title="待处理"  />
                    <el-step title="处理中" />
                    <el-step title="已完成" />
                </el-steps>
            </div>
        </el-card>
    </div>


    <el-dialog v-model="TableVisible" title="工单详情" width="100%">
        <el-table :data="visibledata.details" width="100%" >
            <el-table-column property="label"  label="名称" />
            <el-table-column property="value" label="值" />
        </el-table>
    </el-dialog>

    <el-dialog  v-model="TableEditable" title="工单详情" width="100%">
        <el-form>
            <el-form-item :label="i.label" v-for="i in visibledata.details" :key="i.details" label-width="25%">
                <!-- 设备状态，故障类型 -->
                <el-select v-model="i.value" v-if="i.edible && i.label==='设备状态'"  :placeholder="i.label">
                    <el-option label="工作中" value="工作中" />
                    <el-option label="已故障" value="已故障" />
                    <el-option label="维修中" value="已故障" />
                </el-select>

                <el-select v-model="i.value" v-else-if="i.edible && i.label==='故障类型'"  :placeholder="i.label">
                    <el-option label="数据异常" value="数据异常" />
                    <el-option label="设备磨损" value="设备磨损" />
                    <el-option label="配件损坏" value="配件损坏" />
                </el-select>

                <el-select v-model="i.value" v-else-if="i.edible && i.label==='工单类型'"  :placeholder="i.label">
                    <el-option label="检修工单" value="检修工单" />
                    <el-option label="维修工单" value="维修工单" />
                </el-select>

                <el-input v-model="i.value" v-else-if="i.edible || i.label==='处理进度'" autocomplete="off" />

                <div v-else >{{i.value}}</div>
            </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="TableEditable = false">取消</el-button>
            <el-button type="primary" @click="change()">提交</el-button>
          </span>
        </template>
    </el-dialog>
</template>

<script>

import {hasDeletePermission, hasEditPermission, hasPermission} from "@/store/permission";
import {updateTask} from "@/request/api";

export default {

    name: "WaitingTasks",
    data(){
        return{
            data:[],
            TableVisible:false,
            TableEditable:false,
            visibledata:{},
            currentUser:{}
        }
    },
    mounted() {
        console.log('WaitingTasks - mounted')
        // console.log('this.data',this.$store.state.taskList)
        this.data = this.$store.state.taskList
        this.currentUser = this.$store.state.currentUser
        // console.log(this.$store.state.currentUser)
    },
    methods:{
        hasEditPermission,
        hasDeletePermission,
        hasPermission,
        showDetails(item) {
            //消息
            this.$message(item.label)
            //console.log(item)
            //更改被点击的标签的颜色
            this.data.digital.forEach((i)=>{
                i.color=''
            })
            item.color = '#FFCC00'

            //要么跳转到子页面
            //要么筛选工单，分开显示各种工单
        },
        share(){
            this.$message('待开发')
        },
        del(form){
            this.$message('删除')
        },
        edit(form){
            this.$message('编辑')
            this.TableEditable = true
            console.log(form)
            this.visibledata = form
        },
        view(form){
            this.TableVisible = true
            this.$message('查看')
            console.log(form)
            this.visibledata = form
        },
        get(form){
            console.log('枪单',form)
            // console.log(this.currentUser.ID)
            let newForm = form
            newForm.details[12].value = this.currentUser.ID
            newForm.details[13].value = 2
            // newForm.details[12].value = ''
            // console.log(JSON.stringify(newForm))

            updateTask(newForm.details[0].value,JSON.stringify(newForm)).then((res)=>{
                // console.log(res.code)
                if(res.code === 200){
                    //重新统计一下工单数量
                    this.$store.state.taskList.forEach((x)=>{
                        // console.log(x)
                        if(x.details[0].value === newForm.details[0].value){
                            x = newForm
                        }
                    })
                    // 请求成功后更新一下vuex和当前页面的数据，免得页面没被刷新时，数据没更新
                    // console.log(this.$store.state.taskList)
                    this.data = this.$store.state.taskList

                    this.$store.commit('upDateTaskLength')
                }
            })
        },
        change(){
            this.TableEditable = false
            console.log('提交')
            console.log(this.visibledata)

            //向vuex交一份
            this.$store.commit('updateTask',this.visibledata)
        }
    }
}
</script>

<style scoped>
.box-card {
    width: 100%;
    margin-bottom: 2%;
    border-radius: 3%;
}
.text {
    font-size: 10%;
    margin: 3%;
}
.item {
    margin-bottom: 4%;
}
.clearfix{
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    width:100%;
}
</style>